<template>
	<view class="wrapper">
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'单场记录'" :titleColor="'#fff'" :showBackBtn="true"></custom-nav-bar>
		<view class="top-bg" :style="{top: customBar + 'px'}"></view>
		<view class="main-content" :style="[{top: customBar + 'px', height: `calc(100vh - ${customBar}px - 30px)`}]">
			<view class="full-field-box">
				<view class="top">
					<view class="date">2024/07/03更新</view>
				</view>
				<view class="ceneter">
					<view class="left-player">
						<image src="../../static/logo.png" mode="aspectFill" class="avatar"></image>
						<view class="player">丁俊晖</view>
					</view>
					<view class="vs">
						<view class="top">
							<span class="left-span">56%</span>
							<span class="ceneter-span">vs</span>
							<span class="right-span">44%</span>
						</view>
						<view class="bottom">胜率</view>
					</view>
					<view class="right-player">
						<image src="../../static/logo.png" mode="aspectFill" class="avatar"></image>
						<view class="player">特鲁姆普</view>
					</view>
				</view>
				<view class="bottom">
					<view class="bar">
						<view class="left-player">14胜</view>
						<view class="right-player">13胜</view>
					</view>
				</view>
			</view>
			<view class="tab-bar">
				<view class="bar-item" v-for="(item, index) in typeList" :key="index" :class="{'active': tabIndex == index}" @click="switchTabBar(index)">
					{{item.label}}
				</view>
			</view>
			<scroll-view scroll-y="true" class="details-content-view">
			    <view class="details-content-box">
			    	<view class="details-list" v-if="tabIndex == 0">
			    		<view class="details-item" v-for="(item, index) in 30" :key="index">交手场次</view>
			    	</view>
					<view class="details-list" v-if="tabIndex == 1">
						<view class="details-item" v-for="(item, index) in 30" :key="index">
							<view class="video-box">
								<view class="unlock-btn" @click="unLock()">解锁视频</view>
							</view>
						</view>
					</view>
					<view class="details-list" v-if="tabIndex == 2">
						<view class="technical-statistics">
							<view class="comparison-bar" v-for="(item, index) in statisticalList" :key="index">
								<view class="top-label">
									<view class="left">{{item.value[0] || 0}}{{item.unit}}</view>
									<view class="center">{{item.label}}</view>
									<view class="right">{{item.value[1] || 0}}{{item.unit}}</view>
								</view>
								<view class="bottom-chart">
									<view class="left-bar">
										<view class="blue-player" :style="{
											'width': `${(item.value[0] || 0) / ((item.value[0] || 0) + (item.value[1] || 0)) * 100}%`
										}"></view>
									</view>
									<view class="empty"></view>
									<view class="right-bar">
										<view class="yellow-player" :style="{
											'width': `${(item.value[1] || 0) / ((item.value[0] || 0) + (item.value[1] || 0)) * 100}%`
										}"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
			    </view>
			</scroll-view>
		</view>
		<uni-popup type="center" ref="unlockPrompt">
			<view class="unlock-box">
				<view class="title">解锁提示</view>
				<view class="tips">
					您有券可以抵扣，请选择解锁方式？
				</view>
				<view class="btn-group">
					<view class="btn-item cancel" @click="couponUnlock()">用券解锁</view>
					<view class="empty"></view>
					<view class="btn-item confirm" @click="paymentUnlock()">支付解锁</view>
				</view>
			</view>
			<view class="prompt-close">
			    <image src="../../static/images/prompt-close.png" mode="aspectFit" class="prompt-close-img" @click="closeUnlockPromptPop()"></image>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="unlockingPrompt" :mask-click="false">
			<view class="unlocking-box">
				<view class="title">解锁提示</view>
				<view class="tips">
					成功用券解锁，视频正在解锁中！
				</view>
			</view>
			<view class="prompt-close">
			    <image src="../../static/images/prompt-close.png" mode="aspectFit" class="prompt-close-img" @click="closeUnlockingPromptPop()"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			return {
				customBar,
				opacityVal: '#2f96f7',
				tabIndex: 2,
				typeList: [{
					label: '战绩详情',
					type: 1,
					isSelect: true,
				},{
					label: '视频回放',
					type: 2,
					isSelect: false,
				},{
					label: '技术统计',
					type: 3,
					isSelect: false,
				}],
				statisticalList: [{
					'label': '黑8成功率',
					'value': [60, 40],
					'unit': '%'
				},{
					'label': '平均出杆时间',
					'value': [15, 18],
					'unit': 's'
				},{
					'label': '台面时长',
					'value': [201, 134],
					'unit': 's'
				},{
					'label': '击球杆数',
					'value': [462, 406],
					'unit': ''
				},{
					'label': '总进球数',
					'value': [120, 133],
					'unit': ''
				},{
					'label': '犯规次数',
					'value': [50, 57],
					'unit': ''
				},{
					'label': '平均上手次数',
					'value': [1, 1],
					'unit': ''
				},{
					'label': '平均失误次数',
					'value': [1, 1],
					'unit': ''
				},{
					'label': '进球成功率',
					'value': [40, 37],
					'unit': '%'
				},{
					'label': '长台成功率',
					'value': [5, 22],
					'unit': '%'
				},{
					'label': '走位成功率',
					'value': [20, 31],
					'unit': '%'
				},{
					'label': '开球成功率',
					'value': [30, 25],
					'unit': '%'
				},{
					'label': '炸清次数',
					'value': [5, 2],
					'unit': ''
				},{
					'label': '接清次数',
					'value': [3, 1],
					'unit': ''
				},{
					'label': '大金次数',
					'value': [5, 2],
					'unit': ''
				},{
					'label': '小金次数',
					'value': [5, 2],
					'unit': ''
				},{
					'label': '炸清次数',
					'value': [3, 1],
					'unit': ''
				},{
					'label': '获胜场次',
					'value': [20, 14],
					'unit': ''
				}]
			}
		},
		components: {
			customNavBar,
		},
		onLoad(options) {
			console.log(options);
			if(options.tabIndex) {
				this.tabIndex = options.tabIndex;
			}
		},
		onShow() {
			
		},
		methods: {
			switchTabBar(index) {
				this.tabIndex = index;
			},
			unLock() {
				this.$refs.unlockPrompt.open();
			},
			couponUnlock() {
				this.closeUnlockPromptPop();
				this.$refs.unlockingPrompt.open();
			},
			paymentUnlock() {
				
			},
			closeUnlockPromptPop() {
				this.$refs.unlockPrompt.close();
			},
			closeUnlockingPromptPop() {
				this.$refs.unlockingPrompt.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
		.unlock-box{
			width: 70vw;
			background: #fff;
			border-radius: 20upx;
			padding: 20upx;
			.title{
				text-align: center;
				color: #2f96f7;
			}
			.tips{
				padding: 30upx 0;
				color: #666;
				text-align: center;
			}
			.btn-group{
				display: flex;
				width: 100%;
				.btn-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15upx;
					height: 70upx;
					font-weight: 500;
				}
				.empty{
					width: 50upx;
				}
				.cancel{
					background: #F1F1F1;
					color: #747474;
				}
				.confirm{
					background: $main-color;
					color: #fff;
				}
			}
		}
		.unlocking-box{
			width: 70vw;
			background: #fff;
			border-radius: 20upx;
			padding: 20upx;
			.title{
				text-align: center;
				color: #2f96f7;
			}
			.tips{
				padding: 30upx 0;
				color: #666;
				text-align: center;
			}
		}
		.prompt-close{
			margin-top: 40upx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.prompt-close-img{
				width: 50upx;
				height: 50upx;
			}
		}
		.top-bg{
			position: fixed;
			width: 100vw;
			height: 300upx;
			background: $main-color;
			border-radius: 0 0 50upx 50upx;
		}
		.main-content{
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 30upx;
			.full-field-box{
				background: #fff;
				border-radius: 30upx;
				display: flex;
				flex-direction: column;
				.top{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 4vh;
					padding: 0 10upx;
					.date{
						font-size: 24upx;
						color: #999;
					}
				}
				.ceneter{
					height: 12vh;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.left-player,.right-player{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.avatar{
							width: 100upx;
							height: 100upx;
							border-radius: 100upx;
						}
						.player{
							margin-top: 10upx;
						}
					}
					.vs{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.top{
							display: flex;
							flex-direction: row;
							.left-span,.right-span{
								font-size: 46upx;
							}
							.ceneter-span{
								font-size: 36upx;
								margin: 0 10upx;
							
							}
						}
						.bottom{
							color: #999;
						}
					}
				}
				.bottom{
					height: 4vh;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					padding: 0 20upx;
					.bar{
						width: 100%;
						height: 35upx;
						border-radius: 35upx;
						display: flex;
						flex-direction: row;
						font-size: 22upx;
						color: #fff;
						overflow: hidden;
						.left-player{
							flex: 14;
							background: #7ed2fc;
							padding-left: 20upx;
						}
						.right-player{
							flex: 12;
							background: #ecd531;
							padding-right: 20upx;
							text-align: right;
						}
					}
					
				}
			}
			.tab-bar{
				height: 7vh;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 40upx;
				.bar-item{
					color: #999;
					font-weight: 600;
				}
				.active{
					color: #2f96f7;
				}
			}
			.details-content-view{
				height: calc(100% - 20vh - 7vh);
				.details-content-box{
					.details-list{
						.details-item{
							background: #09f;
							margin: 20upx 0;
							border-radius: 20upx;
							padding: 20upx;
							.video-box{
								width: 100%;
								height: 200upx;
								display: flex;
								justify-content: center;
								align-items: center;
								.unlock-btn{
									padding: 5upx 20upx;
									background: #fff;
									font-size: 30upx;
									border-radius: 10upx;
								}
							}
						}
						.technical-statistics{
							background: #fff;
							border-radius: 20upx;
							padding: 30upx;
							.comparison-bar{
								margin-bottom: 20upx;
								.top-label{
									display: flex;
									justify-content: space-between;
									align-items: center;
									.left{
										color: #419cf8;
										font-weight: 600;
										font-size: 32upx;
									}
									.ceneter{
										
									}
									.right{
										color: #fac46e;
										font-weight: 600;
										font-size: 32upx;
									}
								}
								.bottom-chart{
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 5upx;
									.left-bar{
										flex: 1;
										height: 24upx;
										border-radius: 20upx 0 0 20upx;
										background: #ededec;
										display: flex;
										justify-content: flex-end;
										.blue-player{
											height: 24upx;
											background: #419cf8;
											border-radius: 20upx 0 0 20upx;
										}
									}
									.empty{
										width: 8upx;
									}
									.right-bar{
										flex: 1;
										height: 24upx;
										border-radius: 0 20upx 20upx 0;
										background: #ededec;
										justify-content: flex-start;
										.yellow-player{
											height: 24upx;
											background: #fac46e;
											border-radius: 0 20upx 20upx 0;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

</style>
